<template>
	<h1>App</h1>
	<!-- 
		v-memo="[xxx]"
		用来缓存DOM树
		只有依赖的数据发生变化，才会重新渲染
	-->
	<p v-memo="[count]">{{ count }}</p>
	<button @click="update">update</button>
	<!-- 
		Vue2响应式：新增数据不是响应式，需要用$set
		Vue3响应式：都是响应式
	-->
	<ul>
		<li v-for="(value, key) in person" :key="key">{{ key }} - {{ value }}</li>
	</ul>
	<button @click="person.age = 18">add</button>
	<AComp ref="a" />
</template>

<script>
import AComp from "./AComp.vue";

export default {
	name: "App",
	data() {
		return {
			count: 0,
			person: {
				name: "jack",
			},
		};
	},
	methods: {
		update() {
			this.count += 1;
		},
	},
	mounted() {
		console.log(this.$refs.a);
	},
	components: {
		AComp,
	},
};
</script>

<style></style>
